<template>
  <div>
    <navs title="基地预约"></navs>
    <div class="p16 ft28 backgroundWhite">
      <h3 class="color525 ts">参观日期</h3>
      <date @change="dateChange"></date>
      <div class="u-f u-f-jsb mt16">
        <div
          class="times"
          @click="chooseTime = true"
          :class="{
            'choose-time': chooseTime && surplusNum.morning.count > 0,
            'stop-click': surplusNum.morning.count <= 0
          }"
        >
          <div>{{ surplusNum.morning.time }}</div>
          <div>剩余名额：{{ surplusNum.morning.count }}</div>
        </div>
        <div
          class="times"
          @click="chooseTime = false"
          :class="{
            'choose-time': !chooseTime && surplusNum.afternoon.count > 0,
            'stop-click': surplusNum.afternoon.count <= 0
          }"
        >
          <div>{{ surplusNum.afternoon.time }}</div>
          <div>剩余名额：{{ surplusNum.afternoon.count }}</div>
        </div>
      </div>
    </div>
    <div class="form m16 mt24">
      <div class="ft32 form-tabs">
        <span
          class="tab-item"
          :class="{ 'select-tab1': selectNum == 0 }"
          @click="selectEvent(0)"
          >团队预约</span
        >
        <span
          class="tab-item"
          :class="{ 'select-tab2': selectNum == 1 }"
          @click="selectEvent(1)"
          >个人预约</span
        >
      </div>
      <div v-if="selectNum == 1">
        <van-form ref="personalRef" @submit="personalSubmit">
          <van-field
            readonly
            required
            v-model="personalForm.leader"
            name="leader"
            label="姓名"
            placeholder="请输入姓名"
          /><van-field
            readonly
            required
            v-model="personalForm.id_card"
            name="id_card"
            label="身份证号"
            placeholder="请输入身份证号"
          /><van-field
            readonly
            required
            type="tel"
            v-model="personalForm.phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
          />
          <van-swipe-cell v-for="(item, index) in accompany" :key="index">
            <van-field
              required
              v-model="item.name"
              name="name"
              label="姓名"
              placeholder="请输入随行人姓名"
              :rules="[{ required: true, message: '请输入随行人姓名' }]"
            /><van-field
              maxlength="18"
              v-model="item.id_card"
              required
              name="id_card"
              label="身份证号"
              placeholder="请输入随行人身份证号"
              :rules="[
                { pattern: idCardPattern, message: '请输入随行人身份证号' }
              ]"
            />
            <template #right>
              <van-button
                square
                text="删除"
                type="danger"
                class="delete-button"
                @click="OnClickDel(index)"
              />
            </template>
          </van-swipe-cell>

          <div class="info_border ft24" @click="addPerson">
            +添加随行人员信息
          </div>
          <div class="m20">
            <van-button
              round
              block
              color="#2D65AC"
              native-type="submit"
              :disabled="
                chooseTime
                  ? surplusNum.morning.count <= 0
                  : surplusNum.afternoon.count <= 0
              "
            >
              提交
            </van-button>
          </div>
        </van-form>
      </div>
      <div v-else>
        <van-form ref="groupRef" @submit="groupSubmit">
          <van-field
            required
            v-model="groupForm.leader"
            name="leader"
            label="团体名称"
            placeholder="请输入团体名称"
            :rules="[{ required: true, message: '请输入团体名称' }]"
          /><van-field
            required
            v-model="groupForm.team_name"
            name="team_name"
            label="领队姓名"
            placeholder="请输入领队姓名"
            :rules="[{ required: true, message: '请输入领队姓名' }]"
          /><van-field
            required
            type="digit"
            v-model.number="groupForm.team_number"
            name="team_number"
            label="团队人数"
            placeholder="请输入团队人数"
            :rules="[{ required: true, message: '请输入团队人数' }]"
          />
          <van-field
            type="tel"
            maxlength="11"
            required
            v-model="groupForm.phone"
            name="phone"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请输入手机号' }]"
          />
          <div class="m20">
            <van-button
              round
              block
              color="#2D65AC"
              native-type="submit"
              :disabled="
                chooseTime
                  ? surplusNum.morning.count <= 0
                  : surplusNum.afternoon.count <= 0
              "
            >
              提交
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
  <success :isShow="isSuccess">
    <div v-if="selectNum == 0">
      <p>
        后台管理员将在1-3个工作日内审核办理您的申请；统一咨询热线：0571-86212345；预约进度可在个人中心查看。
      </p>
      <br />
      <p class="colorRed">注意：基地团体预约需电话确认之后，才预约</p>
    </div>
    <p v-else>您的预约申请已经提交成功，预约详情可在个人中心查看。</p>
  </success>
</template>

<script setup>
import success from '@/components/success.vue'
import { Dialog } from 'vant'
import date from '@/components/date.vue'
import {
  reactive,
  ref,
  onBeforeMount,
  getCurrentInstance,
  onMounted
} from 'vue'
import { useRoute } from 'vue-router'
let chooseTime = ref(true) //选择时间
let selectNum = ref(0) //0 团队预约 1个人预约
let isSuccess = ref(false) //form表单是否提交成功
let addPersonNum = ref(1) //添加随行人员信息列表
const route = useRoute()
const id = route.params.id
let surplusNum = reactive({ afternoon: { count: 0 }, morning: { count: 0 } })
let accompany = ref([]) //随行人员数组
let appointment_date = new Date().format('yyyy-MM-dd') //预约时间
const idCardPattern = /\d{17}(\d|x|X)/ //身份证校验
//个人预约表单
const personalForm = reactive({
  leader: '1',
  id_card: '2',
  phone: '13975869858'
})
//团队预约表单
const groupForm = reactive({
  leader: '1',
  team_name: '2',
  team_number: 3,
  phone: ''
})
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties
// 初始化剩余人数
const surplusPersonNumFun = async (date) => {
  let personNum_res = await _this.$api.base.surplusPersonNum(id, date)
  surplusNum = personNum_res.data
}
// 页面加载初始化数据
await surplusPersonNumFun(appointment_date)
//点击添加随行人员信息
const addPerson = () => {
  accompany.value.push({ name: '', id_card: '' })
}
//点击删除随行人员信息
const OnClickDel = (index) => {
  accompany.value.splice(index, 1)
}
const selectEvent = (num) => {
  selectNum.value = num
}
// 日期选择事件
const dateChange = (data) => {
  console.log(data)
  appointment_date = data.date
  surplusPersonNumFun(data.date)
}
const confirmDialog = (confirmCallback) => {
  return Dialog.confirm({
    title: '提交基地预约申请',
    message: '请务必确认参观人员信息的准确性！',
    confirmButtonColor: '#2D65AC'
  })
    .then(() => {
      confirmCallback && confirmCallback()
    })
    .catch(() => {
      // on cancel
    })
}
//个人预约form提交事件
const personalSubmit = (obj) => {
  confirmDialog(() => {
    let data = {
      ...personalForm,
      accompany: accompany.value,
      appointment_date,
      period: chooseTime ? 1 : 2
    }
    console.log(data)
    _this.$api.base.AppointmentSelfBase(id, data).then((res) => {
      console.log(res)
      surplusNum = res.data
      isSuccess.value = true
    })
  })
}
//团体预约form提交事件
const groupSubmit = (obj) => {
  confirmDialog(() => {
    let data = { ...groupForm, appointment_date, period: chooseTime ? 1 : 2 }
    console.log(data)
    _this.$api.base.AppointmentTeamBase(id, data).then((res) => {
      console.log(res)
      surplusNum = res.data
      isSuccess.value = true
    })
  })
}
</script>

<style scoped lang="scss">
.times {
  width: 4.186667rem;
  height: 1.52rem;
  border-radius: 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border: 1px solid #dedede;
  background: none;
  color: #666666;
}
.choose-time {
  color: white;
  border-color: $color_primary;
  background: $color_primary;
}
.stop-click {
  background: #f5f5f5;
}
.form {
  background: #ffffff;
  box-shadow: 0px 2px 4px 3px rgba(218, 218, 218, 0.2);
  border-radius: 8px;
  padding-bottom: 5px;
  &-tabs {
    background: rgba(236, 236, 236, 0.4);
    color: #999999;
  }
  .tab-item {
    display: inline-block;
    width: 50%;
    padding: 5px 0px;
    text-align: center;
  }
  .select-tab1,
  .select-tab2 {
    position: relative;
    z-index: 0;
  }
  .select-tab1::after,
  .select-tab2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    border: 1px solid rgb(218 218 218 / 20%);
    border-bottom: none;
    -webkit-transform: perspective(1em) scale(1, 1.3) rotateX(5deg);
    z-index: -1;
    border-radius: 8px 8px 0px 0px;
  }
  .select-tab1::after {
    -webkit-transform-origin: bottom left;
  }
  .select-tab2::before {
    -webkit-transform-origin: bottom right;
  }
  .info_border {
    width: 3.666667rem;
    height: 0.92rem;
    border-radius: 2px;
    border: 1px solid #999999;
    line-height: 0.92rem;
    text-align: center;
    margin: 0.4rem auto 0.066667rem;
    color: #999999;
  }
  .delete-button {
    height: 100%;
  }
}
</style>
